<template>
  <!-- slot-scope="{date, data}" -->
  <el-calendar :key="$i18n.locale" v-model="value">
    <template
      slot="dateCell"
      slot-scope="{date,data}"
    >
      <div class="date-content">
        <!-- data.day 格式化之后的日期 （yyyy-mm-dd） -->
        <span class="text">{{ getDay(data.day) }}</span>
        <span v-if="isWeek(date)" class="rest">休</span>
      </div></template>
  </el-calendar>
</template>

<script>
export default {
  name: 'Calender',
  data() {
    return {
      value: new Date()
    }
  },
  methods: {
    getDay(value) {
      // split 以 - 为截取点，分割成三个数组，其中下标为2的数组表示的是日
      // day 年月日中的 日
      const day = value.split('-')[2]
      // es6 新增方法 ，判断如果是以'0'开头，返回true 使用slice截取后面的数字
      return day.startsWith('0') ? day.slice(1) : day
    },
    isWeek(date) {
      // getDay() 方法根据本地时间，返回一个具体日期中一周的第几天，0 表示星期天, 6 表示周六。
      return date.getDay() === 6 || date.getDay() === 0
    }
  }
}
</script>

  <style lang="scss" scoped>
   ::v-deep td.next {
     display: none;
   }
   ::v-deep .current ~ td {
     display: revert !important;
   }

   ::v-deep .next ~ td {
     display: none;
   }
   .date-content {
     height: 40px;
     text-align: center;
     line-height: 40px;
     font-size: 14px;
   }
   .date-content .rest {
     color: #fff;
     border-radius: 50%;
     background: rgb(250, 124, 77);
     width: 20px;
     height: 20px;
     line-height: 20px;
     display: inline-block;
     font-size: 12px;
     margin-left: 10px;
   }
   .date-content .text {
     width: 20px;
     height: 20px;
     line-height: 20px;
     display: inline-block;
   }
   </style>

